<template>
  <div class="directorys-container">
    <el-card>
      <!-- 面包屑 -->
      <template #header>
        <div v-if="subject.id && subject.name">
          <!-- <div> -->
          <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item>学科管理</el-breadcrumb-item>

            <el-breadcrumb-item>{{ subject.name }}</el-breadcrumb-item>
            <!-- <el-breadcrumb-item>某个学科分类</el-breadcrumb-item> -->
            <el-breadcrumb-item>目录管理</el-breadcrumb-item>
          </el-breadcrumb>
        </div>
      </template>
      <!-- 筛选 -->
      <el-row>
        <el-col :span="16">

          <el-form label-width="100px"
                   size="small"
                   :inline="true">
            <el-form-item label="目录名称">
              <el-input v-model="requestParams.directoryName"
                        style="200px;" />

            </el-form-item>
            <el-form-item label="状态">
              <!-- 下拉框 -->
              <el-select v-model="requestParams.state">

                <el-option :value="1"
                           label="启用" />
                <el-option :value="0"
                           label="禁用" />

              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button @click="clear()">清除</el-button>

              <el-button type="primary"
                         @click="filter()">搜索</el-button>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="8"
                style="text-align:right">
          <el-button v-if="subject.id && subject.name"
                     icon="el-icon-back"
                     type="text"
                     size="small"
                     @click="$router.back('/subjects')">返回学科</el-button>
          <el-button icon="el-icon-edit"
                     type="success"
                     size="small"
                     @click="openDialog()">新增目录</el-button>
        </el-col>
      </el-row>
      <!-- 总计 -->
      <el-alert :title="`数据一共${total}条`"
                style="margin-bottom:15px"
                type="info"
                class="alert"
                :closable="false"
                show-icon />
      <!-- 表格 -->
      <el-table :data="directorysList">
        <el-table-column align="center"
                         label="序号"
                         type="index"
                         width="80px" />
        <el-table-column align="center"
                         label="所属学科"
                         prop="subjectName" />
        <el-table-column align="center"
                         label="目录名称"
                         prop="directoryName" />
        <el-table-column align="center"
                         label="创建者"
                         prop="username" />
        <el-table-column align="center"
                         label="创建日期"
                         prop="addDate">
          <template #default="{row}">
            {{ row.addDate|parseTimeByString }}
          </template>
        </el-table-column>
        <el-table-column align="center"
                         label="面试题数量"
                         prop="totals" />
        <el-table-column align="center"
                         label="状态"
                         prop="state">
          <template #default="{row}">
            {{ row.state===1?'已启用':'已禁用' }}
          </template>
        </el-table-column>
        <el-table-column align="center"
                         label="操作"
                         width="150px">
          <template #default="{row}">
            <el-button type="text"
                       @click="toggleState(row)">{{ row.state === 0?'启用':'禁用' }}</el-button>
            <el-button type="text"
                       :disabled="row.state===1"
                       @click="openDialog(row)">修改</el-button>
            <el-button type="text"
                       :disabled="row.state===1"
                       @click="delDirectory(row)">删除</el-button>

          </template>
        </el-table-column>
        <!-- 按钮 -->
      </el-table>
      <!-- 分页 -->

      <el-pagination style="margin-top:20px;text-align:right"
                     background
                     layout="prev, pager, next, sizes, jumper"
                     :total="total"
                     :page-size="requestParams.pagesize"
                     :current-page="requestParams.page"
                     :page-sizes="[2,5,10,20,50]"
                     @current-change="handleCurrentChange"
                     @size-change="handleSizeChange" />
    </el-card>

    <!-- 新增目录/修改目录 -->
    <DirectorysAdd ref="directorysAdd"
                   :data="currentDirectory"
                   @updateList="updateList()" />

  </div>
</template>

<script>
import { list, changeState, remove } from '@/api/hmmm/directorys.js'
import DirectorysAdd from '../components/directorys-add.vue'
export default {
  name: 'DirectorysList',
  components: {
    DirectorysAdd
  },

  data () {


    return {
      requestParams: {
        page: 1,
        pagesize: 10,
        directoryName: null,
        state: null
      },
      directorysList: [], // 目录数组
      total: 0,
      currentDirectory: []// 当前目录

    }
  },
  computed: {

    subject () {
      return this.$route.query || {}
    }
  },
  watch: {
    '$router.query': function () {
      this.getList()
    }
  },
  created () {
    this.getList()
  },
  methods: {
    // 获取列表数据，渲染页面
    async getList () {

      const res = await list(this.requestParams)
      console.log('目录列表', res)
      this.directorysList = res.data.items// 返回的目录数据数组
      this.total = res.data.counts // 目录总计
    },
    // 清除筛选条件

    clear () {

      this.requestParams = {
        page: 1,
        pagesize: 10,
        directoryName: null,
        state: null
      }
      this.getList()
    },
    // 筛选条件

    filter () {

      this.requestParams.page = 1
      this.getList()
    },

    // 分页-切换条数

    handleSizeChange (value) {

      this.requestParams.page = 1
      this.requestParams.pagesize = value
      this.getList()
    },
    // 分页-切换分页

    handleCurrentChange (value) {

      this.requestParams.page = value
      this.getList()
    },

    // 切换状态（禁用、启用）

    async toggleState (directory) {

      await changeState({ id: directory.id, state: directory.state })
      this.$message.success('操作成功')
      directory.state = directory.state === 1 ? 0 : 1
    },

    // 打开对话框（新增、修改目录）

    openDialog (directory = {}) {

      this.currentDirectory = directory
      this.$nextTick(() => {
        this.$refs.directorysAdd.open()
      })
    },
    // 更新列表（新增/修改目录）

    updateList () {

      if (!this.currentDirectory.id) {
        this.requestParams.page = 1 // 回到第一页
      }
      this.getList()
    },

    // 删除某个目录

    async delDirectory (directory) {

      await this.$confirm('此操作将永久删除该目录，是否继续', '提示', {
        confirmButtonText: '确定',
        concelButtonText: '取消',
        type: 'warning'
      })
      await remove(directory)
      this.$message.success('删除成功')
      this.getList()
    }
  }
}
</script>

<style scoped lang='scss'>
.container {
  padding: 10px;
}
</style>
